<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>类之间的继承关系(Inheritance relationships between classes)</title>
    <!-- 
    在JavaScript中，类之间的继承关系是通过原型链和 class 语法实现的。以下是关于JavaScript类继承关系的总结和说明： 
 
      1. 基本概念 
      - 类（Class）：是对象的蓝图，可以包含属性和方法。 
      - 继承（Inheritance）：允许一个类（子类）继承另一个类（父类）的属性和方法，从而实现代码复用。 
      
      2. 使用 class 和 extends 关键字 
      - 使用 class 关键字定义类，使用 extends 关键字实现继承。

      3. 构造函数 
      - 子类的构造函数必须调用 super() ，以确保父类的构造函数被正确执行。 
      
      4. 方法重写 
      - 子类可以重写父类的方法，以提供特定的实现。

      5. 多层继承 
      - JavaScript不支持多重继承，但可以通过组合多个类来实现类似效果。

      6. 静态方法 
      - 使用 static 关键字定义静态方法，静态方法只能通过类本身调用，而不是通过实例。

      7. 原型链 
      - JavaScript的继承机制基于原型链，子类的实例可以访问父类的属性和方法。

      8.  super 关键字 
      - 在子类中使用 super 可以调用父类的方法和构造函数。

      9. 私有属性和方法 
      - 从ES2022开始，JavaScript支持私有属性和方法，使用 # 前缀定义。
      
      10. 总结:
        JavaScript的类继承机制使得代码复用和扩展变得更加简单和直观。
        通过使用 class 、 extends 、 super 等关键字，可以轻松实现类之间的继承关系。
        在实际开发中，合理使用继承可以提高代码的可维护性和可读性。 
   -->
  </head>
  <body>
    <script>
      // 1.类的继承
      class Parent {
        constructor(name) {
          this.name = name;
        }

        greet() {
          console.log(`1.类的继承Hello, my name is ${this.name}`);
        }
      }

      class Child extends Parent {
        constructor(name, age) {
          super(name); // 调用父类的构造函数
          this.age = age;
        }

        introduce() {
          console.log(`1.类的继承I am ${this.age} years old.`);
        }
      }

      const child = new Child("Alice", 10);
      child.greet();
      child.introduce();

      console.log("=======================================================");
      // 2.方法重写
      class Rewrite extends Parent {
        greet() {
          console.log(`2.方法重写Hi, I am ${this.name}`);
        }
      }

      const rewrite = new Rewrite("Alice");
      rewrite.greet();

      console.log("=======================================================");

      // 3.静态方法
      class StaticMethod {
        static sayHello() {
          console.log("3.静态方法Hello, world!");
        }
      }

      StaticMethod.sayHello();

      console.log("=======================================================");

      // 4.私有属性和方法
      class Private {
        #privateProperty;

        constructor() {
          this.#privateProperty = "4.私有属性和方法This is private";
        }

        getPrivateProperty() {
          return this.#privateProperty;
        }
      }

      const privateObj = new Private();
      console.log(privateObj.getPrivateProperty());

      console.log("=======================================================");

      // 5.多层继承
      class A {
        methodA() {
          console.log("5.多层继承Method A");
        }
      }

      class B extends A {
        methodB() {
          console.log("5.多层继承Method B");
        }
      }

      class C extends B {
        methodC() {
          console.log("5.多层继承Method C");
        }
      }

      const instance = new C();
      instance.methodA(); // 输出: Method A
      instance.methodB(); // 输出: Method B
      instance.methodC(); // 输出: Method C

      console.log("=======================================================");

      // 6.原型继承
      function Animal(name) {
        this.name = name;
      }

      Animal.prototype.speak = function () {
        console.log(`"6.原型继承", ${this.name} makes a noise.`);
      };

      function Dog(name, breed) {
        Animal.call(this, name);
        this.breed = breed;
      }

      Dog.prototype = Object.create(Animal.prototype);
      Dog.prototype.constructor = Dog;
      Dog.prototype.bark = function () {
        console.log(`6.原型继承${this.name} barks.`);
      };
      const dog = new Dog("6.原型继承Rex", "Golden Retriever");
      dog.speak(); // 输出: Rex makes a noise.
      dog.bark(); // 输出: Rex barks.

      console.log("=======================================================");

      // 7.原型链
      console.log("7.原型链", child instanceof Child); // 输出: true
      console.log("7.原型链", child instanceof Parent); // 输出: true

      console.log("=======================================================");

      // 8.super 关键字
      class SuperChild extends Parent {
        greet() {
          super.greet(); // 调用父类的greet方法
          console.log("8.super 关键字: I am a child.");
        }
      }

      const superChild = new SuperChild("Alice");
      superChild.greet();
    </script>
  </body>
</html>
